.home {
  background: rgb(70, 0, 101);

  .header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #020f2a;

    .logo {
      width: 60px;
    }
  }

  .banner {
    display: flex;
    background-color: rgb(85, 0, 101);
    height: 400px;
    width: 100%;
  }

  .count-down {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px 0 0;
    box-sizing: border-box;

    .clock-img {
      width: 120px;
    }

    .logo-txt {
      padding: 10px 0 0;
    }

    .subtitle {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0 20px;
      

      h4 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        font-size: 20px;
        padding: 10px;
        white-space: nowrap;
        line-height: 30px;
      }

      .clock-line {
        transform: rotate(180deg)
      }
    }

    &-element {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      color: #fff;
      font-size: 12px;

      .item-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
        font-family: "Poppins 500", "Noto Sans Regular", "Helvetica Neue", Arial, sans-serif;

        &-count {
          font-size: 36px;
          font-weight: bold;
          letter-spacing: 2px;
        }
        &-label{
          font-size: 22px;
          padding: 10px 0;
        }
      }
    }
    .match-card{
      padding: 0 20px;
      box-sizing: border-box;
      img{
        width: 100%;
      }
    }
    // .match-card {
    //   background-color: #fff;
    //   border-radius: 5px;
    //   margin: 10px 0 0;
    //   width: 100%;
    //   padding: 6px;
    //   box-sizing: border-box;
    //   color: #505b73;
    //   font-size: 16px;

    //   &-group {
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //   }

    //   &-data {
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;

    //     .team-info {
    //       display: flex;
    //       align-items: center;
    //       margin: 10px 0 0;
    //     }

    //     .team-logo {
    //       width: 36px;
    //       border: 1px solid #d4c164;
    //     }
    //   }

    //   &-time {
    //     color: #020f2a;
    //     font-size: 16px;
    //     font-weight: bold;
    //   }
    // }
  }

  .count-down-b {
    display: block;
    width: 35%;
  }

  .count-down-s {
    display: none;
  }

  .latest-activity {
    width: 65%;
  }

  .slider {
    height: 100% !important;
    width: 100%;

    &-item {
      height: 400px;
      position: relative;

      &-wrap {
        position: absolute;
        left: 30px;
        bottom: 20px;
        max-width: 80%;
      }

      &-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 130%;
        font-size: 24px;
        color: #fff;
        font-family: "Poppins 500", "Noto Sans Regular", "Helvetica Neue", Arial, sans-serif;
      }

      &-desc {
        font-family: "Poppins Regular", "Noto Sans Regular", "Helvetica Neue", Arial, sans-serif;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .invite {
    padding: 40px;
    background-color: #550065;
    &-title{
      color: #fff;
      font-size: 16px;
      text-align: center;
      p{
        padding: 15px 0;
      }
    }
    .world-cup{
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      &-img{
        padding: 0 10px;
        box-sizing: border-box;
        img{
          width: 100%;
        }

      }
    }
    &-count{
      padding: 15px 0;
    }
    &-action{
      font-size: 22px;
    }
    .am-button {
      padding: 0 20px;
      margin: 0 20px;
      min-width: 260px;
      background-color: #9e56a4;
      color: #fff;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      &::before {
        border: none !important
      }
    }
  }
  .mint-glod{
    padding: 0 40px;
    background-color: #550065;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
  }
  .invite-action{
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
    font-weight: bold;
    .am-button{
      padding: 0 20%;
    }
  }

  .footer {
    padding: 0 0 20px;

    &-logo {
      border-bottom: 1px solid rgb(218, 201, 109);
      padding: 10px;
    }

    .partners {
      h5 {
        text-align: center;
        color: #fff;
        font-size: 10px;
        line-height: 1;
        padding: 5px;
        margin: 0;
        font-weight: normal;

      }

      // display: flex;
      // align-items: center;
      // justify-content: center;
      &-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 20%;
        justify-content: center;
      }

      &-item {
        align-self: center;
        text-align: center;
        margin: 10px 10px 0;
      }
    }
  }
}

.modal-box {
  .am-modal-content {
    background-color: #061430;
    p{
      padding: 30px 0 0;
    }
  }
}
.am-modal-transparent {
  width: 80% !important;
  .modal-tips {
    font-size: 26px;
    text-align: left;
    line-height: 36px;
  }
}
.copy-button {
  font-weight: bold;
  .am-button {
    margin: 20px 0;
    padding: 0 30%;
    background-color: #9e56a4;
    color: #fff;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 32px;
    height: 70px;
    line-height: 70px;
    
    &::before {
      border: none !important
    }
  }
}

@media screen and (max-width: 1024px) {
  .home {
    .invite{
      padding: 20px;
      .am-button {
          font-size: 18px;
          margin: 10px 10px 0;
          height: 60px;
          line-height: 60px;
          min-width: 160px;
        }
    }
    .footer {
      .partners {
        &-list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding: 0 30%;
          justify-content: center;
        }

        &-item {
          flex: 0 0 33.33%;
          margin: 20px 0 0;
        }
      }
    }
  }
  .invite-action {
    .am-button {
      padding: 0 30%;
    }
  }
}



@media screen and (max-width: 768px) {
  .home {
    font-size: 30px;

    .header {
      padding: 20px 0;

      .logo {
        width: 80px;
      }
    }

    .banner {
      height: 500px;
      display: none !important;

      .slider {
        &-item {
          height: 500px;
        }
      }

    }
     .invite {
       padding: 40px;
       background-color: #550065;
  
       &-title {
         color: #fff;
         font-size: 16px;
         text-align: center;
       }
  
      .world-cup {
         &-img {
           flex: 33.33%;
           padding: 0 10px;
           box-sizing: border-box;
           img{
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
           }
         }
       }
      .am-button {
        font-size: 18px;
        margin: 10px 10px 0;
        height: 60px;
        line-height: 60px;
      }
     }

      .invite-action {
        .am-button {
          padding: 0 30%;
        }
      }

    .latest-activity {
      width: 100%;
    }

    .count-down-b {
      display: none;
    }

    .count-down-s {
      display: block;
      background-color: #550065;
      padding: 0 10px;
    }

    .count-down {
      width: 100%;

      // .match-card {
      //   padding: 20px;
      // }
    }
    .mint-glod{
      padding: 0;
      .am-button{
        padding: 0 20px;
        min-width: 200px;
        font-size: 18px;
      }
    }
    .footer {
      .partners {
        h5 {
          text-align: center;
          color: #fff;
          font-size: 16px;
          padding: 20px 0;
          margin: 0;
        }

        &-list {
          padding: 0 10%;
        }

        &-item {
          flex: 0 0 50%;
          margin: 20px 0 0;
        }
      }
    }
  }
  .copy-button {
    .am-button {
      height: 80px !important;
      line-height: 80px !important;
    }
  }

}